<template>
  <div>
    <div class="form-wrap">
      <div class="header">请上传认证信息</div>
      <form
        bindsubmit="onSubmit">
        <mt-form
          ref="form"
          @change="onFormChange"
        >
          <div class="form-item-group">
            <mt-form-item class="form-item" prop="student_card_cover_img"
                          style="margin-bottom: 20rpx;"
            >
              <a-upload
                :s-model="model.student_card_cover_img"
                bgi="http://oss.kaoyanvip.cn/uploads/file1568689380936.png"
              >
                <div slot="content">
                  <div class="content-title">学生证封面</div>
                  <div class="content-sub">点击上传学生证封面</div>
                </div>
              </a-upload>
            </mt-form-item>
            <mt-form-item class="form-item" prop="student_card_home_img"
                          style="margin-bottom: 33rpx;"
            >
              <a-upload
                :s-model="model.student_card_home_img"
                bgi="http://oss.kaoyanvip.cn/uploads/file1568275794696.png"
              >
                <div slot="content">
                  <div class="content-title">学生证内页</div>
                  <div class="content-sub">点击上传学生证内页</div>
                </div>
              </a-upload>
            </mt-form-item>
            <div style="margin-bottom: 28rpx;">
              <div class="u-flex u-aic exp"
                   @tap="toggleExp"
              >
                <div>我是研途学员</div>
                <image v-if="hideExp"
                       class="arrow" src="http://oss.kaoyanvip.cn/uploads/file1568276147035.png"></image>
                <image v-if="!hideExp" class="arrow" src="http://oss.kaoyanvip.cn/uploads/file1568276207445.png"></image>
              </div>
            </div>
            <div :hidden="hideExp">
              <mt-form-item class="form-item" prop="yt_student_proof_img"
                            style="margin-bottom: 73rpx;"
              >
                <a-upload
                  :s-model="model.yt_student_proof_img"
                  bgi="http://oss.kaoyanvip.cn/uploads/file1568275848002.png"
                >
                  <div slot="content">
                    <div class="content-title">学员凭证截图</div>
                    <div class="content-sub">点击上传学员凭证</div>
                  </div>
                </a-upload>
              </mt-form-item>
            </div>
          </div>

          <div class="btn-group">
            <button
              style="width: 670rpx;"
              disabled="{{disabledForm}}"
              class="a-btn a-btn-primary"
              form-type="submit"
            >申请成为沪江研途菁英</button>
          </div>
          <div class="form-tip">
            <text>我已阅读并同意校园</text><text class="link" @tap="goToProxyProtocol">代理协议</text>
          </div>
        </mt-form>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    behaviors: [],
    data() {
      return {
        model: {
        },
        disabledForm: false,
        hideExp: true,
        inited: false
      }
    },
    attached() {
      this.setSs()
      this.$native.emit('ready')
    },
    methods: {
      isInited() {
        return this.data.inited
      },
      init(ext = {}) {
        let d = {
          model: {
            ...ext
          },
          inited: true
        }
        d.hideExp = true
        if (d.model.yt_student_proof_img) {
          d.hideExp = false
        }
        this.doToggle(d.hideExp)
        this.$staticRefs.form.setValue(d.model)
        this.setData(d, () => {
          // console.log('this.data', this.data.model)
          if (Object.keys(ext).length > 0) {
            this.validForm()
          }
        })
      },
      toggleExp() {
        let newVal = !this.data.hideExp
        this.doToggle(newVal)
        this.setData({
          hideExp: newVal,
        }, () => {
          this.validForm()
        })
      },
      doToggle(newVal) {
        if (newVal) {
          this.setSs()
        } else {
          this.setBV()
        }
      },
      setSs() {
        this.$staticRefs.form.setDescriptor(
          {
            student_card_cover_img: $global.Utils.Regexp.required('string', '学生证封面未上传'),
            student_card_home_img: $global.Utils.Regexp.required('string', '学生证内页未上传'),
          }
        )
      },
      setBV() {
        this.$staticRefs.form.setDescriptor(
          {
            student_card_cover_img: $global.Utils.Regexp.required('string', '学生证封面未上传'),
            student_card_home_img: $global.Utils.Regexp.required('string', '学生证内页未上传'),
            yt_student_proof_img: $global.Utils.Regexp.required('string', '学员凭证未上传'),
          }
        )
      },
      goToProxyProtocol() {
        this.$routePage('proxy-protocol')
      },
      onFormChange() {
        wx.nextTick(() => {
          this.validForm()
        })
      },
      validForm(cb, onError) {
        this.$staticRefs.form.validate((errors) => {
          // console.log(fields)
          if(errors) {
            console.log('errors', errors)
            onError && onError(errors)
            this.setData({
              disabledForm: false
            })
            return
          }

          this.setData({
            disabledForm: false
          })

          cb && cb()
        })
      },
      getFormData() {
        let d = this.$staticRefs.form.getParsedValue()
        if (this.data.hideExp) {
          delete d.yt_student_proof_img
        }
        return d
      },
      onSubmit(e) {
        let self = this
        this.validForm(() => {
          setTimeout(() => {
            self.$native.emit('success')
          }, 300)
        }, (errors) => {
          console.log('errors[0]', errors[0])
          if (errors[0] && errors[0].message) {
            app.showToast(errors[0].message.replace('Error: ', ''))
          }
        })
      }
    },
  }
</script>

<style lang="less">
  @import "../../app.component.less";

  .form-wrap {
    padding-top: 47pt;
  }

  .header {
    color: #222222;
    font-size: 36pt;
    line-height: 50pt;
    margin-bottom: 42pt;
    padding-left: 40pt;
  }

  .btn-group {
    margin-bottom: 30pt;
  }

  .form-tip {
    font-size: 28pt;
    color: #222222;
    margin-bottom: 36pt;
    text-align: center;
    .link {
      color: #007bff;
    }
  }

  .content {
    &-title {
      color: #222222;
      font-size: 36pt;
    }
    &-sub {
      color: #999999;
      font-size: 24pt;
    }
  }

  .form-item {
    display: block;
  }

  .exp {
    color: #999999;
    font-size: 24pt;
    padding-left: 40pt;
  }

  .arrow {
    display: block;
    size: 16pt 10pt;
    margin-left: 21pt;
  }
</style>
